<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>huaweipinban</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <link rel="stylesheet" href="./css/huaweipinban.css">
    <link rel="stylesheet" href="./css/animations.css">
    <link rel="stylesheet" href="./css/foot.css">
   <script src="./js/huaw.js"></script>
</head>
<body>

    <div class="head">
        <div class="head_content1">
            <!-- <img src="./imges/imges_首页/10005.svg" alt="" class="c1"> -->
            <div class="logo">冯柏源22215220432</div>
            <ul>
              <li><a href="./index-手机.html">手机 <div class="bottom"></div></a>  </li>
              <li><a href="./index-电脑-1.html">电脑  <div class="bottom"></div></a> </li>
              <li><a href="./index-平板.html">平板   <div class="bottom"></div></a></li>
              <!-- <li><a href="#">智慧屏 <div class="bottom"></div></a>  </li> -->
              <li><a href="./watch.html">穿戴  <div class="bottom"></div></a></li>
              <li><a href="./404.html">耳机音响  <div class="bottom"></div></a></li>
              <li><a href="./index-全屋智能.html">全屋智能  <div class="bottom"></div></a></li>
              <li><a href="./404.html">路由器 <div class="bottom"></div></a> </li>
            </ul>
        </div>

              <div class="head_content2">
                    <ul>
                      <li><a href="./index-服务支持.html">服务支持 <div class="bottom"></div></a> </li>
                      <li><a href="./index_商用.html">商用 <div class="bottom"></div></a> </li>
                      <li><a href="./sreach.html"></a></li>   
                      <li><a href="./denlu.html"></a></li>   
                      <li><a href="./index-商城.html">flytech商城</a></li>
                    </ul>
                </div>
         </div>
 
      <div class="c3">
        <span>HUAWEI MatePad Pro 13.2 英寸 </span>
         <div class="head_content2" style="position: relative; left: 560px;"> 
           <ul>
            <li><a href="#">功能特征</a></li>
            <li><a href="#">天生绘画</a></li>
            <li><a href="#">规格参数</a></li>
            <li><a href="#">购买</a></li>
          </ul>
        </div>
      </div>

    <div class="screen1">
        <img src="./imges/imges.首页2/10001.jpg" alt="">
        <div class="s1_content1">
            <div><strong>HUAWEI</strong> MatePad Pro 13.2</div>
            <div>以大见大</div>
            <div>13.2 英寸柔性 OLED 大屏1 丨 鸿蒙专业生产力 丨 星闪手写笔2</div>
            <div>¥ 5699* 起</div>
            <button><a href="">立即购买</a></button>
        </div>
    </div>

     <div class="screen2">
        <div class="s2_contents">
          <div class="img1"> 
            <video src="./imges/imges.首页2/video-1.mp4" style="width: 700px;height: 310px; background-size: cover; " autoplay loop></video>
            <div class="ziti-1" style="position: relative; top: -184%;"><a href="">13.2 英寸1柔性 OLED 大屏</a></div>
          </div>
          <div class="img2">
            <div class="ziti-1" style="margin-top: 65%;"><a href="">超轻，超薄，超靓颜</a></div>
          </div>
          <div class="img3">
            <div class="ziti-1" style="margin-top: 85%;"><a href="">鸿蒙专业生产力，</a></div>
            <div class="ziti-2"><a href="">效率拔群</a></div>
            <div class="guodu">专业数位板级写画体验HUAWEI M-Pencil（第三代）9，业界首⁠支超万级压感10手写笔</div>
          </div>
          <div class="img4">
            <div class="ziti-1"><a href="">鸿蒙专业生产力，</a></div>
            <div class="ziti-2"><a href="">效率拔群</a></div>
            <div class="guodu">PC级办公生态，HarmonyOS智慧交互</div>
          </div>
          <div class="img5">
            <div class="ziti-1"><a href="">鸿蒙专业生产力，</a></div>
            <div class="ziti-2"><a href="">效率拔群</a></div>
            <div class="guodu">10,100 mAh 超大容量电池6，40 分钟充满至 85%7。</div>
          </div>
          <div class="img6">
            <div class="ziti-1"><a href="">鸿蒙专业生产力，</a></div>
            <div class="ziti-2"><a href="">效率拔群</a></div>
            <div class="guodu"><div>创新多驱动阵列扬声器，震⁠撼音画 HDR Vivid、Audio Vivid 双认证8。</div></div>
          </div>
        </div>
     </div>

     <div class="screen3">
      <div class="s3_contents">
       <div class="s3_1">
           <p>屏幕</p>
           <span>实力巅峰, 问鼎之作</span>
       </div>
       </div>
       <div class="s3_2">
            <p>13.2 英寸柔性 OLED 大屏，亮出万千光彩</p>
       </div>
       <div class="s3_3">
           <p>这块 13.2 英寸柔性 OLED 大屏1，入眼满是惊艳。94% 超高屏占比3，带来近乎无边的巨幕视觉享受；3:2 黄金生产力比例，效率给足马力；全新亮相的华为临境™显示，明⁠艳处有层次，阴影过渡有细节，观影如⁠临其境。</p>
       </div>
       <div class="s3_4">
        <p>3:2</p>
        <span>屏幕比例</span>
       </div>
       <div class="s3_5">
        <p>94%</p>
        <span>占比</span>
       </div>
        <div class="s3_6">
          <video src="./imges/imges.首页2/video-1.mp4" style="width: 1030px;height: 550px; background-size: cover; " autoplay loop></video>
        </div>
        <div class="s3_7">
           <div class="s3_7_left" style="border-bottom: 1px solid #f1f3f5;"><p>2880 × 1920</p> <span>2.8K 分辨率</span></div>
           <div class="s3_7_mid" style="border-bottom: 1px solid #f1f3f5;"><p>144 Hz</p> <span>刷新率11</span> </div>
           <div class="s3_7_right" style="border-bottom: 1px solid #f1f3f5;"><p>1000 nits</p> <span>峰值亮度12</span></div>
           <div class="s3_7_left"><p>1,000,000:1</p> <span>高对比度</span></div>
           <div class="s3_7_mid"><p>ΔE < 1</p> <span>专业级色准13</span></div>
           <div class="s3_7_right"><p>P3</p> <span>广色域</span></div>
           </div>

           <div class="s3_8">
              <div class="s3_8_1">通透护眼，专业好屏</div>
              <div class="s3_8_2">只一眼，令人赏心悦目。屏幕覆以磁控纳米光学镀膜，不仅观感通透，还能有效减少反光；搭载自然光感显示技术，强光下画面明暗有致，暗光下不失丰富细节。更通过专业的莱茵全局护眼 3.0 认证，用眼舒适，护眼周⁠全。</div>
           </div>

          <div class="s3_9">
              <img src="./imges/imges.首页2/10009.webp" alt="" style="width: 905px;  height: 638px; margin-top: -100px; margin-bottom: 20px;">
              <div class="s3_9_1" style="width: 220px; height: 80px; float: left;">
                <p>磁控纳米光学镀膜防反射</p>
                <span>日光下浏览画面依然清晰</span>
              </div>
              <div class="s3_9_2" style="width: 356px; height: 80px; float: left; margin-left: 50px;">
                <p>多屏同色14 ︱P3 广色域无线投屏15</p>
                <span>不同设备，呈现的色彩始终如一</span>
              </div>
              <div class="s3_9_3" style="width: 250px; height: 80px;float: right;">
                <p>莱茵全局护眼 3.0 认证16</p>
                <span>严苛测试，全面舒适护眼</span>
              </div>
          </div>
        </div>

              <!--  -->
              <button id="backToTopBtn" onclick="scrollToTop()"> <span>^</span>回到顶部</button>
              <!--  -->

   <div class="screen4">
    <div class="s4_contents">
        <div class="s4_1">
          <p>设计</p>
          <span>超轻，超薄, 超靓颜</span>
        </div>
    </div>
    <div class="s4_2">
      <div class="s4_2_1">精妙质感,轻巧随行</div>
      <div class="s4_2_2">超薄体型，随行一身轻。层层雕琢的锦纤材⁠质，赋予机身温⁠润的金属光泽，以及细腻的微砂触感，精致且耐磨抗污。搭⁠配独特的微弧腰线设计，圆融形态握持更舒⁠适</div>
       <div class="s4_2_3"><img src="./imges/imges.首页2/10014.webp" alt="" style="width: 1100px; height: 560px;"></div>
   </div>
 </div>
 
 <div class="screen5">
    <div class="s5_contents">
      <div class="s5_1">
        <p>HarmonyOS 4</p>
        <span>释放生产力,效率大提升</span>
    </div>
    </div>
    <div class="s5_2">
       <div class="s5_2_1">悬浮多窗口，操作更自由</div>
       <div class="s5_2_2">多个悬浮窗口随心叠放，自由调度，玩转高⁠效率；窗口支持等比缩放大小，三档尺寸任你调；悬浮小窗也支持平行视界。全新生⁠产力桌面卡片，文件一步直达，办公效率更快⁠捷⁠。</div>
       <div class="s5_2_3"><video src="./imges/imges.首页2/video-3.mp4" style="width: 800px;height: 480px; " autoplay loop></video ></div>
    </div>
    <div class="s5_3">
        <div class="s5_3_left">
          <div class="s5_3_left_1">专属 PC 级应用， 样样有专攻</div>
           <div class="s5_3_left_2">全新 PC 级 WPS Office 升级亮相。熟悉的界⁠面布局，办公操作更顺手。还有更高阶的绘图利器亿图图示，学习帮手 CAJViewer，深度还原桌面级办公体验，操作默契上手。</div>
        </div>
        <div class="s5_3_right">
              <div class="s5_3_right_1">
                 <div class="right1"></div>
                 <p>支持云账号跨端文件同步、中转站内⁠容拖拽流转、键鼠交互、</p>
                 <p>华为打⁠印、智慧语⁠音。</p>
              </div>
              <div class="s5_3_right_2">
                  <div class="right2"></div>
                  <p>一站式办公绘图利器，流程图、思维导图、架构图、网络图、</p>
                  <p>工业设计、图文混排，统统都能搞⁠定。</p>
              </div>
              <div class="s5_3_right_3">
                   <div class="right3"></div>
                   <p>专业文献阅读器，丰富阅读批注工具和书签标记管理，</p>
                   <p>效率倍增，你的学⁠习好帮⁠手。</p>
              </div>
        </div>
    </div>

    <div class="s5_4">
        <div class="s5_4_1">会议演示批注，处处可圈可点</div>
        <div class="s5_4_2">会议远程屏幕共享，HUAWEI M-Pencil（第三代）派⁠上大用场，讲演内容可标注可⁠圈点，线上讨论信息更聚焦；线下会议，平板上提笔标注，协同大屏实时呈现，主⁠讲重点一目了然。</div>
        <div class="s5_4_3"> <video src="./imges/imges.首页2/video-4.mp4" style="width: 1000px; height: 600px; background-size: cover; "  autoplay loop></video></div>
    </div>
 </div>

 <div class="screen6">
    <div class="s6_contents">
      <div class="s6_1">
        <p>手写笔</p>
        <span>Pencil（第三代）星闪手写笔</span>
    </div>
    </div>

    <div class="s6_2">
      <div class="s6_2_1">超万级压感,下笔如有神</div>
      <div class="s6_2_2">HUAWEI M-Pencil（第三代）9，业界首支超万级压感的手写笔10，搭载星闪无线通信技术2，写画本领更精进。落笔快，起笔稳，笔触变化更细腻，眼到即手到；超低时延，笔划跟手不打滑，还原真实写绘的好体验。</div>
      <div class="s6_2_3"><img src="./imges/imges.首页2/10015.webp" alt="" width="1000px" height="580px"></div>
   </div>
     
   <div class="s6_4">
    <div class="s6_4_1">全新 AI 字迹调整，一手好字随心写</div>
    <div class="s6_4_2">全新华为笔记，支持通过套索工具对手写字⁠迹进行字体美化24，多种字体可选。一手好字信手拈来，灵感随心记录。</div>
    <div class="s6_4_3"> <video src="./imges/imges.首页2/video-5.mp4" style="width: 1000px; height: 600px; background-size: cover; "  autoplay loop></video></div>
</div>
 </div>


          <!-- 底部 -->
          <div class="footer">
            <div class="wrapper">
                <div class="footer_text">
                    价格仅供参考，具体价格请以华为商城展示为准。
                    <p></p>
                    以上页面中的产品图片、视频及屏幕内容仅作示意，实物产品效果（包括但不限于外观、颜色、尺寸）和屏幕显示内容（包括但不限于背景、UI、配图、视频）可能略有差异，请以实物为准。
                    <p></p>
                    部分产品配件需单独购买，页面效果仅供参考。
                    <p></p>
                    以上页面中的数据为理论值，均来自华为内部实验室，于特定测试环境下所得（请见各项具体说明），实际使用中可能因产品个体差异、软件版本、使用条件和环境因素不同略有不同，请以实际使用的情况为准。
                    <p></p>
                    由于产品批次和生产供应因素实时变化，为尽可能提供准确的产品信息、规格参数、产品特性，华为可能实时调整和修订以上页面中的文字表述、图片效果等内容，以求与实际产品性能、规格、指数、零部件等信息相匹配。
                    <p></p>
                    如遇确有进行上述修改和调整必要的情形，恕不专门通知。
                </div>
                <div class="main">
                    <a href="#">主页</a>
                    <span> / </span>
                    手机
                </div>
                <div class="footer_links">
                    <ul>
                        <li>
                            <h3>购买产品</h3>
                            <ul class="inter">
                                <li>
                                    <a href="#" title="手机">
                                        手机</a>
                                </li>
                                <li>
                                    <a href="#" title="笔记本">
                                        笔记本</a>
                                </li>
                                <li>
                                    <a href="#" title="台式机">
                                        台式机</a>
                                </li>
                                <li>
                                    <a href="#" title="显示器">
                                        显示器</a>
                                </li>
                                <li>
                                    <a href="#" title="打印机">
                                        打印机</a>
                                </li>
                                <li>
                                    <a href="#" title="平板">
                                        平板</a>
                                </li>
                                <li>
                                    <a href="#" title="智慧屏">
                                        智慧屏</a>
                                </li>
                                <li>
                                    <a href="#" title="穿戴">
                                        穿戴</a>
                                </li>
                                <li>
                                    <a href="#" title="耳机音箱">
                                        耳机音箱</a>
                                </li>
                                <li>
                                    <a href="#" title="路由器">
                                        路由器</a>
                                </li>
                                <li>
                                    <a href="#" title="配件">
                                        配件</a>
                                </li>
                                <li>
                                    <a href="#" title="商用产品">
                                        商用产品</a>
                                </li>
                                <li>
                                    <a href="#" title="教育商店">
                                        教育商店</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>服务支持</h3>
                            <ul class="inter">
                                <li>
                                    <a href="#" title="保修政策">
                                        保修政策</a>
                                </li>
                                <li>
                                    <a href="#" title="上门安装">
                                        上门安装</a>
                                </li>
                                <li>
                                    <a href="#" title="维修服务">
                                        维修服务</a>
                                </li>
                                <li>
                                    <a href="#" title="保修期及权益查询">
                                        保修期及权益查询</a>
                                </li>
                                <li>
                                    <a href="#" title="维修备件价格">
                                        维修备件价格</a>
                                </li>
                                <li>
                                    <a href="#" title="服务进度查询">
                                        服务进度查询</a>
                                </li>
                                <li>
                                    <a href="#" title="联系我们">
                                        联系我们</a>
                                </li>
                                <li>
                                    <a href="#" title="服务隐私声明">
                                        服务隐私声明</a>
                                </li>
                                <li>
                                    <a href="#" title="商用服务">
                                        商用服务</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>应用与下载</h3>
                            <ul class="inter">
                                <li>
                                    <a href="#" title="终端云服务">
                                        终端云服务</a>
                                </li>
                                <li>
                                    <a href="#" title="华为商城APP">
                                        华为商城APP</a>
                                </li>
                                <li>
                                    <a href="#" title="我的华为APP">
                                        我的华为APP</a>
                                </li>
                                <li>
                                    <a href="#" title="华为手机助手">
                                        华为手机助手</a>
                                </li>
                                <li>
                                    <a href="#" title="华为电脑管家">
                                        华为电脑管家</a>
                                </li>
                                <li>
                                    <a href="#" title="HarmonyOS 4">
                                        HarmonyOS 4</a>
                                </li>
                                <li>
                                    <a href="#" title="预置应用公示">
                                        预置应用公示</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>新闻中心</h3>
                            <ul class="inter">
                                <li>
                                    <a href="#" title="华为新闻">
                                        华为新闻</a>
                                </li>
                                <li>
                                    <a href="#" title="华为活动">
                                        华为活动</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <h3>关于我们</h3>
                            <ul class="inter">
                                <li>
                                    <a href="#" title="关于我们">
                                        关于我们</a>
                                </li>
                                <li>
                                    <a href="#" title="可持续发展">
                                        可持续发展</a>
                                </li>
                                <li>
                                    <a href="#" title="隐私">
                                        隐私</a>
                                </li>
                                <li>
                                    <a href="#" title="华为商城">
                                        华为商城</a>
                                </li>
                                <li>
                                    <a href="#" title="华为云">
                                        华为云</a>
                                </li>
                                <li>
                                    <a href="#" title="企业业务">
                                        企业业务</a>
                                </li>
                                <li>
                                    <a href="#" title="运营商网络">
                                        运营商网络</a>
                                </li>
                                <li>
                                    <a href="#" title="华为集团">
                                        华为集团</a>
                                </li>
                                <li>
                                    <a href="#" title="加入华为">
                                        加入华为</a>
                                </li>
                                <li>
                                    <a href="#" title="内容举报">
                                        内容举报</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
      
                </div>
                
            </div>
        </div>

   <script>
    ScrollTrigger.create({
     trigger:'.screen4 .s4_1',
     start:'-=400',
     end:'+=320',
    //  markers:true,
     scrub:true,
     pin:true,
     animation:gsap.from('.s4_1',{y:-70,opacity:0,duration: 2}),
     animation:gsap.to('.s4_1',{y:-50,opacity:1,duration: 2})
   })

   ScrollTrigger.create({
     trigger:'.s5_1',
     start:'-=700',
     end:'-=320',
    //  markers:true,
     scrub:true,
    //  pin:true,
     animation:gsap.from('.s5_1',{y:-100,opacity:0}),
     animation:gsap.to('.s5_1',{y:0,opacity:1,duration: 1})
   })

   ScrollTrigger.create({
     trigger:'.s5_3_left',
     start:'-=100',
     end:'+=1290',
    //  markers:true,
     pin:'.s5_3_left'
   })
  
   ScrollTrigger.create({
     trigger:'.right1',
     start:'-=500',
     end:'+=0',
    //  markers:true,
    animation:gsap.to('.right1',{maxWidth:950,duration: 2})
   })

   
   ScrollTrigger.create({
     trigger:'.right2',
     start:'-=500',
     end:'+=0',
    //  markers:true,
    animation:gsap.to('.right2',{maxWidth:950,duration: 2})
   })

   ScrollTrigger.create({
     trigger:'.right3',
     start:'-=500',
     end:'+=0',
    //  markers:true,
    animation:gsap.to('.right3',{maxWidth:950,duration: 2})
   })

   ScrollTrigger.create({
     trigger:'.s6_1',
     start:'-=750',
     end:'-=370',
    //  markers:true,
     scrub:true,
    //  pin:true,
     animation:gsap.from('.s6_1',{y:-100,opacity:0}),
     animation:gsap.to('.s6_1',{y:0,opacity:1,duration: 1})
   })
   
   </script>
</body>
</html>